
<template>
  <n-grid x-gap="12" :cols="2">
    <n-gi>
      <n-input type="textarea" class="text" placeholder="字符串" @change="handleChange" />
    </n-gi>
    <n-gi style="height: 80vh;">
      
      <n-grid x-gap="12" :cols="1" style="height: 100%;">
        <n-gi class="parent">
          <!-- 二维码 -->
          <div id="qrCode"></div>
        </n-gi>
        <n-gi class="parent">
          <!-- 条形码 -->
          <svg id="barcode"></svg>
        </n-gi>
      </n-grid>
    </n-gi>
  </n-grid>
</template>

<script  lang="ts">
import { defineComponent, ref, Ref } from 'vue'
import QRCode from 'qrcodejs2-fix';
import JsBarcode from 'jsbarcode';

export default defineComponent({
  name: 'Json',
  setup() {
    let data = ref("");
    let that = this;
    return {
      data,
      handleChange(v: string) {
        console.log(v)
        // data.value = JSON.stringify(JSON.parse(v), null, '\t')
        // 解决重复点击预览按钮会重复生成二维码
        // if (this.$refs.qrCodeDiv) {
        //   this.$refs.qrCodeDiv.innerHTML = '';
        // }
        let qrcodeDiv = document.getElementById("qrCode") as HTMLDivElement;
        qrcodeDiv.innerHTML = "";
        new QRCode(qrcodeDiv, {
          text: v, // 需要转换为二维码的内容
          width: 200, //宽度
          height: 200, //高度
          colorDark: '#000000', //二维码方块颜色
          colorLight: '#ffffff', //背景颜色
        });

        JsBarcode("#barcode", v, {
          format: "CODE128", //选择要使用的条形码类型
          width: 2, //线宽
          height: 100, //条码高度
          text: v, //显示文本
          displayValue: true, //是否在条形码下方显示文字
          textPosition: "bottom", //设置文本的垂直位置
          // fontOptions: "bold italic", //使文字加粗体或变斜体
          background: "#fff", //设置条形码的背景
          // font: "fantasy", //设置文本的字体
          lineColor: "#000", //设置条和文本的颜色。
          fontSize: 14, //设置文本的大小
          margin: 8 //设置条形码周围的空白边距
        });
      }
    }
  }
})
</script>

<style scoped>
.text {
  text-align: left;
  height: 80vh;
}

.parent {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>